<template>
  <div>
    <div class="demo-input-size">
      <el-input v-model="con" placeholder="按内容查询" :suffix-icon="Search" />
    </div>
    <div class="look">
      <el-button @click="qurryByCon()">查询</el-button>
    </div>
    

    <el-table :data="orders" stripe style="width: 100%">
      <el-table-column prop="oid" label="ID" width="100" />
      <el-table-column prop="content" label="内容" width="350" />
      <el-table-column prop="state" label="状态" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.state == 1">未接单</span>
          <span v-if="scope.row.state == 2">进行中</span>
          <span v-if="scope.row.state == 3">待评价</span>
          <span v-if="scope.row.state == 4">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="other" label="备注" width="250" />
      <el-table-column prop="conment" label="评论" width="250"/>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" text @click="handleUpdate(scope.row)">详情</el-button>

          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除
          </el-button>
          
        </template>
      </el-table-column>
    </el-table>

     <el-dialog v-model="dialogFormVisible4Edit" title="订单详情" width="45%" align-center>
          <el-form :model="formData" label-width="120px">
          <el-form-item label="订单ID:">
              {{formData.oid}}
          </el-form-item>
           <el-form-item label="跑腿员:">
            {{formData.workerName}}
          </el-form-item>
          <el-form-item label="评价:">
            {{formData.conment}}
          </el-form-item>
          <el-form-item label="状态:">
          <span v-if="formData.state == 1">未接单</span>
          <span v-if="formData.state == 2">进行中</span>
          <span v-if="formData.state == 3">待评价</span>
          <span v-if="formData.state == 4">已完成</span>
          </el-form-item>
          <el-form-item label="起始地址:">
            {{formData.slocation}}
          </el-form-item>
          <el-form-item label="送达地址:">
            {{formData.elocation}}
          </el-form-item> 
          <el-form-item label="下单时间:">
            {{formData.time}}
          </el-form-item> 
          </el-form>
          <div class="ff">
          
            <el-button  type="primary" @click="dialogFormVisible4Edit = false">确定</el-button>
          
          </div>
        </el-dialog>

    <div class="footer">
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getApi, deleteApi, postApi, updateApi } from "@/util/api";

const DialogVisible = ref(false);
const centerDialogVisible = ref(false);
const dialogVisible = ref(false);

const textarea = ref('')
</script>

<script>
export default {
  data() {
    return {
      orders: [],
      pagination: {
        currentPage: 1, //当前页码
        pageSize: 10, //一页多少条
        total: 0,
      },
      
      con: "",
      conment:{
        content:"",
      },
       dialogFormVisible4Edit:false,
              formData:{},
    };
  },
  created() {
    this.getAll();
  },

  methods: {
    getAll() {
      //分页,发送异步数据
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?state=4"
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getAll();
    },

    //删除
    handleDelete(row) {
      //console.log(row);
      this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          deleteApi("users/orders/" + row.oid)
            .then((rs) => {
              if (rs.data.code == 1) {
                this.$message.success("删除成功");
              } else {
                this.$message.error("删除失败");
              }
            })
            .finally(() => {
              this.getAll();
            });
        })
        .catch(() => {
          this.$message.info("取消操作");
        });
    },

    //详情
    handleUpdate(row){
      getApi("users/orders/"+row.oid).then((res)=>{
            if(res.data.code == 1){
              this.formData = res.data.data;
              this.dialogFormVisible4Edit = true;
            }else{
              this.$message.error("数据同步失败，自动刷新");
            }
          }).finally(()=>{
            this.getAll();
        });
    },
    

    //查询
    qurryByCon() {
      getApi(
        "users/orders/" +
          this.pagination.currentPage +
          "/" +
          this.pagination.pageSize +
          "?state=4" +
          "&con=" +
          this.con
      )
        .then((rs) => {
          this.pagination.pageSize = rs.data.data.size;
          this.pagination.currentPage = rs.data.data.current;
          this.pagination.total = rs.data.data.total;
          this.orders = rs.data.data.records;
        })
        .catch((error) => {
          alert(error);
        });
    },

    //详情

    //评价
    handleSubmit(){
        postApi("/orders/conments",this.conment)
        .then((rs) => {
          //判断当前操作是否成功
          if (rs.data.code == 1) {
            //1、关闭弹层
            this.DialogVisible = false;
            this.$message.success("评价成功");
          } else if(rs.data.code == 30002) {
            this.$message.error("业务逻辑出现错误，请联系管理员处理！");
          }
        })
         .catch((error) => {
          alert(error);
        });
    }
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.is-background {
  margin-top: 10px;
}
.demo-input-size {
  display: inline-block;
  vertical-align: middle;
}
.look {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.newbu {
  display: inline-block;
  font-weight: bolder;
  margin-left: 10px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
}
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>